<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>ASP Cloud Storage</title>

<link rel="stylesheet" type="text/css" href="../css/mystyle.css"/>
<link rel="stylesheet" type="text/css" href="../js/jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.css"/>
<script src="../js/jquery-1.9.1.min.js"></script>
<script src="../js/jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.js"></script>

<script>
	function batchDelete(dirName){
		if(confirm('确认删除吗？')){
			var delForm = document.getElementById("batchDelForm_"+dirName);
			delForm.submit();
		}
	}
	
	function rename(srcKey,destKey){
		var rs = prompt("原文件名 "+destKey+"\n新文件名：",destKey);
		if(rs != null && rs != ""){
			window.location.href = "file_rename.action?srcKey="+srcKey+"&destKey="+rs+"&fromUrl=${fromUrl}";
		}
	}
	
	// @ allCheck 用来全选的那个checkbox对象
	function selectCheckboxes(allCheck){
		var b = allCheck.checked;
		var checks = $('input[name="checkboxes"]');
		for(var i=0;i<checks.length;i++){
			if(checks[i].parentNode.parentNode.parentNode.parentNode.style.display != "none"){
				$(checks[i]).prop('checked',b).checkboxradio('refresh');
			}
		}
		
	}
	
	function deleteFiles(){
		// 动态创建form
		var submitForm = document.createElement("FORM");
		// document.body.appendChild(submitForm);
		submitForm.method = "POST";
		submitForm.action = "file_batch_remove.action";
		
		var checks = document.getElementsByName("checkboxes");
		for(var i=0;i<checks.length;i++){
			if(checks[i].checked){
				var delForm = document.getElementById(checks[i].id + "_delForm");
				var delFiles = delForm.childNodes;
				for(var j=0;j<delFiles.length;j++){
					submitForm.appendChild(delFiles[j]);
				}
			}
		}
		if(submitForm.childNodes.length == 0){
			return;
		}
		
		// 创建fromUrl hidden input
		var fromUrlHidden = document.createElement("input");
		fromUrlHidden.setAttribute("name","fromUrl");
		fromUrlHidden.setAttribute("type","hidden");
		fromUrlHidden.setAttribute("value","${fromUrl}");
		submitForm.appendChild(fromUrlHidden);
		
		submitForm.submit();
	}
</script>

<script type="text/javascript">
// page ctrls
function refreshPageCtrl(_totalPage ){
	var pageStr = '';
	for(var i=0;i<_totalPage;i++){
		pageStr += '<option value="'+String(i+1)+'" >'+String(i+1)+'/'+String(_totalPage)+'</option>';
	}
	$("#pagecontrol_sel").attr('rows',_totalPage);
	$("#pagecontrol_sel").html( pageStr ).selectmenu('refresh', true);
	
	turnToPage(1, $("#pagecontrol_sel").attr('rows'));
}
function turnToPage(_page, _totalPages){
	$.post("", {"curpage":_page, "totalpages":_totalPages}, function(feedback){
			$("#pagecontrol_sel").val( _page );
			$("#pagecontrol_sel").selectmenu('refresh', true);
			
			if(_page==1){
				$("#pagecontrol_first").addClass("ui-disabled");
				$("#pagecontrol_pre").addClass("ui-disabled");
			} else if(_page>1) {
				$("#pagecontrol_first").removeClass("ui-disabled");
				$("#pagecontrol_pre").removeClass("ui-disabled");
			}
			if(_page==_totalPages){
				$("#pagecontrol_last").addClass("ui-disabled");
				$("#pagecontrol_next").addClass("ui-disabled");
			} else if(_page<_totalPages) {
				$("#pagecontrol_last").removeClass("ui-disabled");
				$("#pagecontrol_next").removeClass("ui-disabled");
			}
	});
}
function pageCtrl( _mode ){
	switch(_mode){
		case 'first':
			turnToPage(1,$("#pagecontrol_sel").attr('rows'));
			changePage(1);
			break;
		case 'last':
			turnToPage($("#pagecontrol_sel").attr('rows'),$("#pagecontrol_sel").attr('rows'));
			changePage($("#pagecontrol_sel").attr('rows'));
			break;
		case 'pre':
			turnToPage(parseInt($("#pagecontrol_sel").val())-1,$("#pagecontrol_sel").attr('rows'));
			changePage(parseInt($("#pagecontrol_sel").val())-1);
			break;
		case 'next':
			turnToPage(parseInt($("#pagecontrol_sel").val())+1,$("#pagecontrol_sel").attr('rows'));
			changePage(parseInt($("#pagecontrol_sel").val())+1);
			break;
		case 'page':
			turnToPage(parseInt($("#pagecontrol_sel").val()),$("#pagecontrol_sel").attr('rows'));
			changePage(parseInt($("#pagecontrol_sel").val()));
			break;
	}
}


function changePage(pageclickednumber){
	var tb = document.getElementById("filesTable");
	var tbLength = tb.rows.length;
		
	// 把所有行设置成不显示
	for(var i=1;i<tbLength;i++){
		tb.rows[i].style.display = "none";
	}
		
	var firstIndex = (pageclickednumber - 1)*${pageSize} + 1;
	var lastIndex = firstIndex + ${pageSize};
	for(i = firstIndex;i < lastIndex;i++ ){
		if(tb.rows[i]){
			tb.rows[i].style.display = "";
		}		
	}
	
	// 全选勾去掉
	$("selectall").prop('checked',false).checkboxradio('refresh');
}
// choose files to upload
function upload( obj ){
	for(var i=0;i<obj.files.length;i++){
		//alert( obj.files[i].name );
		var newFileItemStr = '<div id="ttt" style="width:200px;float:left;margin-left:10px;"><a href="javascript:" onclick="$(this).parent().remove();" data-role="button" data-icon="delete" data-iconpos="right" data-mini="true">'+obj.files[i].name+'</a><div style="width:75%;background-color:#069;height:2px;line-height:2px;"></div></div>';
		$("#fileuploader").append($(newFileItemStr)).trigger( "create" );;
	}
}
</script>

<script>
	function checkform(){
		var keyInput = document.getElementById("keyInput").value;
		var fileInput = document.getElementById("fileInput").value;
		if(keyInput != "" && fileInput!= ""){
			document.getElementById("uploadForm").submit();
		}else{
			alert("请填写文件名和文件路径");
		}
	}
</script>

</head>

<body onload = "refreshPageCtrl(${pageCount});changePage(1);">

<div data-role="page" id="login" data-theme="a">
	
    <div class="txssession" style="background-color:#DDD;">
    	<div class="ui-grid-a">
        	<div class="ui-block-a">
                <div style="margin:10px;"><div id="txsheader">ASP CS</div></div>
            </div>
            <div class="ui-block-b">
            	<div style="overflow:hidden;margin:10px;">
                	<div style="margin-right:10px;float:right;"><a href="logout.action" style="text-decoration:none;font-size:14px;font-weight:normal;text-shadow:none;">LOGOUT</a></div>
                	<#-- <div style="margin-right:10px;float:right;"><a href="#" style="text-decoration:none;font-size:14px;font-weight:normal;text-shadow:none;">SETTINGS</a></div> 暂时没有可设置的功能-->
                	<div style="margin-right:10px;float:right;"><a href="#" style="text-decoration:none;font-size:14px;font-weight:normal;text-shadow:none;">${userName?default("")}</a></div>
                </div>
            </div>
        </div>
    </div>
    <div data-role="header" style="overflow:hidden;">
        <div style="float:left;">
        	<table border="0" cellspacing="0" cellpadding="0">
        	<tr>
        	<td>
        	 <form id="queryForm" action="file_list.action" method="get">
				<input style="width:145px;height:10px;" type="search" name="prefix" id="prefix" value="" placeholder="Enter file prefix name" data-mini="true" ></td><td><a data-role="button" data-mini="true" data-icon="search" data-iconpos="notext" onclick='document.getElementById("queryForm").submit();'>Search</a>
             </form>
        	</td>
        	</tr>
        	</table>
        </div>
        <span style="color:#FF0000; margin: auto auto 0px 10px;">${err}</span>
		<div style="float:right;">
        	<div data-role="controlgroup" data-type="horizontal" data-mini="true">
            	<a href="#uploadsettings" data-role="button" data-icon="plus" data-iconpos="left" data-theme="b">Upload</a>
            	<#-- <div data-role="button" data-icon="arrow-d" data-iconpos="left" data-theme="b" class="ui-disabled">Download</div> 点击文件名直接下载，不需要专门下载页面-->
        		<div data-role="button" data-icon="delete" data-iconpos="left" data-theme="b" onclick="deleteFiles();">Delete</div>
            </div>
        </div>
    </div><!-- /header -->
    
    <div data-role="content" data-theme="c">
        <div data-role="controlgroup" data-type="horizontal" data-mini="true">
        	<a href="file_list.action" data-role="button" data-icon="home" data-ajax="false">Home</a>
            <#if paths?exists>
            <#assign prePath="" />
            <#list paths as path>
            	<#assign prePath = prePath + path + "/" />
            	<#if path != ""><a href="file_list.action?prefix=${prePath}" data-role="button" data-ajax="false">${path}</a></#if>
            </#list>
            </#if>
        </div>
        
        <div data-role="content" style="border:1px solid #CCC;min-height:720px;">         
            <table data-role="table" id="filesTable" data-mode="reflow" class="ui-responsive table-stroke">
                <thead>
                    <tr>
                    	<th data-priority="1"><div style="width:38px;height:40px;overflow:hidden;"><input type="checkbox" name="selectall" id="selectall" data-mini="true" onchange="selectCheckboxes(this);"/><label for="selectall" data-mini="true" style="width:34px;height:34px;">&nbsp;</label></div></th>
                        <th data-priority="2"><a data-role="button" data-mini="true" onclick='window.location.href = "file_list.action?orderType=key&orderASC=<#if orderASC == "asc">desc<#else>asc</#if>&prefix=" + encodeURIComponent("${prefix?default("")}")'>Name <#if orderType=="key"><#if orderASC == "asc">上<#else>下</#if></#if></a></th>
                        <th data-priority="3"><a data-role="button" data-mini="true">Type</a></th>
                        <th data-priority="4"><a data-role="button" data-mini="true" onclick='window.location.href = "file_list.action?orderType=date&orderASC=<#if orderASC == "asc">desc<#else>asc</#if>&prefix=" + encodeURIComponent("${prefix?default("")}")'>Modify Date <#if orderType=="date"><#if orderASC == "asc">上<#else>下</#if></#if></a></th>
                        <th data-priority="5"><a data-role="button" data-mini="true" onclick='window.location.href = "file_list.action?orderType=size&orderASC=<#if orderASC == "asc">desc<#else>asc</#if>&prefix=" + encodeURIComponent("${prefix?default("")}")'>Size <#if orderType=="size"><#if orderASC == "asc">上<#else>下</#if></#if></a></th>
                    </tr>
                </thead>
                <tbody>
            
            <#if dirSet?exists>
            	<#list dirSet as d>
                    <tr>
                    	<th>
                    		<div style="width:38px;height:40px;overflow:hidden;"><input type="checkbox" name="checkboxes" id="dir_${d_index + 1}" data-mini="true" /><label for="dir_${d_index + 1}" data-mini="true" style="width:34px;height:34px;">&nbsp;</label></div>
                    		<form id="dir_${d_index + 1}_delForm"><#list d.containsFiles as delFile><input type="hidden" name="delFiles" value="${delFile}"></#list></form>
                    	</th>
                        <td><a href="file_list.action?prefix=${d?html}" style="color:#AAA;font-size:14px;" data-ajax="false">${d?html}</a></td>
                        <td style="color:#BBB;font-size:14px;">目录</td>
                        <td style="color:#BBB;font-size:14px;">${d.putDate?string("yyyy-MM-dd HH:mm:ss")}</td>
                        <td style="color:#BBB;font-size:14px;"></td>
                    </tr>
               </#list>
            </#if>
            
            <#if fileList?exists>
            <#list fileList as f>
          			<tr>
                    	<th>
                    		<div style="width:38px;height:40px;overflow:hidden;"><input type="checkbox" name="checkboxes" id="file_${f_index + 1}" data-mini="true" /><label for="file_${f_index + 1}" data-mini="true" style="width:34px;height:34px;">&nbsp;</label></div>
                    		<form id="file_${f_index + 1}_delForm"><input type="hidden" name="delFiles" value="${f.key?html}"></form>
                    	</th>
                        <td><a href="file_download.action?key=${f.key?html}" style="color:#AAA;font-size:14px;" data-ajax="false">${f.key?html}</a></td>
                        <td style="color:#BBB;font-size:14px;">${f.mimeType}</td>
                        <td style="color:#BBB;font-size:14px;">${f.putDate?string("yyyy-MM-dd HH:mm:ss")}</td>
                        <td style="color:#BBB;font-size:14px;">${f.readableSize}</td>
                        <td style="color:#BBB;font-size:14px;"><a style="cursor:pointer" onclick='rename("${f.key?js_string}","${f.key?js_string}");'>重命名</a></td>
                    </tr>
            </#list>
            </#if>
            
                </tbody>
            </table>
        </div>

        <div data-role="footer">
        <div id="pagescontrolgroup" data-role="controlgroup" data-type="horizontal" data-mini="true" style="text-align:center">
            <a id="pagecontrol_first" href="javascript:pageCtrl('first')" data-role="button" class="ui-disabled">First</a>
            <a id="pagecontrol_pre" href="javascript:pageCtrl('pre')" data-role="button" class="ui-disabled">PRE</a>
            <select data-role="text" name="pagecontrol_sel" id="pagecontrol_sel" onchange="pageCtrl('page')" rows="0">
        	</select>
            <a id="pagecontrol_next" href="javascript:pageCtrl('next')" data-role="button" class="ui-disabled">Next</a>
            <a id="pagecontrol_last" href="javascript:pageCtrl('last')" data-role="button" class="ui-disabled">Last</a>
        </div>
        </div>
        
    	<div data-role="content" style="border:1px solid #CCC;">
        	<div id="fileuploader">
            	
            </div>
        </div>

    </div>



    <div data-role="footer">
        <div>ASP CLOUD STORAGE</div>
    </div>
</div>

<div data-role="page" data-theme="b" id="uploadsettings">
    <div class="txssession" style="background-color:#DDD;">
    	<div class="ui-grid-a">
        	<div class="ui-block-a">
                <div style="margin:10px;"><div id="txsheader">ASP CS</div></div>
            </div>
            <div class="ui-block-b">
            	<div style="overflow:hidden;margin:10px;">
                	<div style="margin-right:10px;float:right;"><a href="logout.action" style="text-decoration:none;font-size:14px;font-weight:normal;text-shadow:none;">LOGOUT</a></div>
                	<#-- <div style="margin-right:10px;float:right;"><a href="#" style="text-decoration:none;font-size:14px;font-weight:normal;text-shadow:none;">SETTINGS</a></div> 暂时没有功能需要设置-->
                	<div style="margin-right:10px;float:right;"><a href="#" style="text-decoration:none;font-size:14px;font-weight:normal;text-shadow:none;">${userName}</a></div>
                </div>
            </div>
        </div>
    </div>
    
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#EEE;margin:0px;min-height:720px;"><tr><td align="center" valign="top" ><table border="0" cellpadding="0" cellspacing="0" class="txssession"><tr><td align="center" valign="top">
        <h2 style="color:#999;max-width:300px;">File Upload Setting</h2>
        <form id="uploadForm" method="post" action="http://up.qiniu.com/" enctype="multipart/form-data">
        <div style="max-width:400px;width:100%;">
        		<div class="ui-grid-solo">
                	<input id="keyInput" name="key" type="text" value="" placeholder="File Name" />
					<div style="font-size:12px;color:#F63;text-align:left;">Require an unique File Name.</div>
                	<input id="fileInput" name="file" type="file" value="" />
                	<input name="token" type="hidden" value="${uploadToken}">
					<input name="x:fromUrl" type="hidden" value="${fromUrl}">
                </div>
                <div class="ui-grid-a">
                	<div class="ui-block-a"><button type="button" onclick="checkform();" data-theme="b">Upload</button></div>
                    <div class="ui-block-b"><a href="javascript:void(0)" data-role="button" data-rel="back" data-theme="a">Back</a></div>
                </div>
		</div>
		</form>
    </td></tr></table></td></tr></table>
    
    <div data-role="footer" data-position="fixed">
        <div>ASP CLOUD STORAGE</div>
    </div>
</div>

</body>
</html>
